import { useState } from "react";
import { useSelector } from "react-redux";
import { View, Image, Text, Button } from "@tarojs/components";
import Taro, { useReady, useRouter } from "@tarojs/taro";
// import { AtList, AtListItem, AtButton } from "taro-ui";
import { activityDetailApi, activityJoinApi } from '../../../http/Api/activity'
import "./index.scss";

const ActivityDetail = () => {
  const openid = useSelector((state) => state.user.openid)
  const [detail, setDetail] = useState({});
  const getListApi = async (id) => {
    if (!id) return;

    const res = await activityDetailApi(id);
    console.log('获取到详情数据：', res);
    if (res.data.code == '200') {
      setDetail(res.data.data)
    }
  }

  const router = useRouter()
  useReady(() => {
    const id = router.params.id;
    console.log('参数：', id);
    getListApi(id);
  })

  // 展示位置
  const onShowMap = (obj) => {
    Taro.openLocation({
      latitude: obj.latitude,
      longitude: obj.longitude,
      scale: 18
    })
  }

  const handleClick = async () => {
    const res = await activityJoinApi({
      openid,
      activity_id: detail.activity_id
    });
    console.log('报名结果：', res);
  }
  return (
    <View className="activity_detail">
      {/* <AtList>
        <AtListItem title="标题" onClick={handleClick} />
        <AtListItem title="标题内容" arrow="right" />
        <AtListItem title="标题时间" extraText="详细信息" />
        <AtListItem title="人数" />
        <AtListItem title="地点" extraText="点击查看详细位置" />
      </AtList>

      <AtButton type="primary">参与</AtButton> */}

      <View className="activity_detail_item">
        <View className="activity_detail_item_title">标题</View>
        <View className="activity_detail_item_body">{detail.activity_title}</View>
      </View>
      <View className="activity_detail_item">
        <View className="activity_detail_item_title">内容</View>
        <View className="activity_detail_item_body">{detail.activity_body}</View>
      </View>
      <View className="activity_detail_item">
        <View className="activity_detail_item_title">时间</View>
        <View className="activity_detail_item_body">{detail.activity_detasel}</View>
      </View>
      <View className="activity_detail_item">
        <View className="activity_detail_item_title">人数限制</View>
        <View className="activity_detail_item_body">{detail.activity_count == 0 ? '无限制' : detail.activity_count}</View>
      </View>
      <View className="activity_detail_item" onClick={() => onShowMap({
        latitude: detail.activity_latitude,
        longitude: detail.activity_longitude
      })}>
        <View className="activity_detail_item_title">地点</View>
        <View className="activity_detail_item_body">{detail.activity_name}</View>
      </View>
      {
        (openid != detail.openid) && <Button onClick={handleClick}>参与</Button>
      }

    </View>
  );
};

export default ActivityDetail;
